<template>
  <zm-dialog title="产品批量导入" :visible.sync="value" :before-close="close">
    <zm-form :model="form" :rules="formRules" ref="formRef" label-position="right" label-width="100px">
      <zm-form-item label="产品类目">
        <el-cascader class="w300" v-model="form.childCategory" :options="obj.categoryList" :show-all-levels="false" :props="{value: 'id',label:'name'}"></el-cascader>
      </zm-form-item>
      <zm-form-item label="批量导入" prop="cacheKey">
        <!-- :http-request="fileUpload" -->
        <!-- <zm-upload v-model="form.fileData" accept=".csv" :limit="1" :single-file-size="20" @before-upload="beforeUpload" class="dib">

        </zm-upload> -->
        <!-- :single-file-size="5" -->
        <zm-button @click="onUpLoad">上传</zm-button>
        <zm-upload
              ref="zmUpload"
              v-show="false"
              :http-request="fileUpload"
              accept=".csv"
              :limit="1"
            >
        </zm-upload>
        <zm-button type="text" @click="onExport">
          模板下载
        </zm-button>
        <zm-export ref="export" :api="exportApi()" type="warning" v-show="false"></zm-export>
      </zm-form-item>
      <zm-form-item label="产品可售部门">
        <zm-data-radio v-model="form.isApartment" :list="apartmentRadio" />
        <zm-form-item class="mt10 mb0" v-if="+form.isApartment === 2">
          <tree-select ref="treeSelect2" :is-checkbox="true" out-class="w300" v-model="form.apartmentList" :tree="obj.apartmentList" :tree-props="{ label: 'name', valueKey: 'value' }" placeholder="请选择指定部门"></tree-select>
        </zm-form-item>
      </zm-form-item>
      <zm-form-item label="使用规则">
        <zm-input type="textarea" :rows="10" show-word-limit :maxlength="1000" class="w300" v-model="form.usageRules" placeholder="请输入使用规则"></zm-input>
      </zm-form-item>
    </zm-form>

    <div slot="footer">
      <zm-button @click="close">取消</zm-button>
      <zm-button @click="onSubmit">确认</zm-button>
    </div>
  </zm-dialog>
</template>

<script>
import panelMixin from '@/mixins/panelMixin'
import ZmUpload from '@/components/ZmUpload/components/main'
import TreeSelect from '@/components/TreeSelect'
// import ExportButton from '@/components/ExportButton/index.vue'
import { uploadProduct, importProduct, getProductUploadFile } from '@/api/src/productDraft'
export default {
  name: 'ExcelImport',
  components: { ZmUpload, TreeSelect },
  mixins: [panelMixin],
  props: {
    obj: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      apartmentRadio: [
        {
          value: '1',
          name: '全部部门'
        },
        {
          value: '2',
          name: '指定部门'
        }
      ],
      form: {
        mainCategory: '', // 一级类目Id
        childCategory: '', // 二级类目
        // fileData: '', // 文件
        cacheKey: '', // 令牌
        isApartment: '2', // 可售部门 1 全部 2 指定
        apartmentList: '', // 指定部门id 字符串','拼接
        usageRules: '' // 使用规则
      },
      formRules: {
        cacheKey: { required: true, message: '请上传内容', triggle: 'change' }
      }
    }
  },
  computed: {},
  watch: {},
  created () {
    // this.init()
  },
  mounted () {

  },
  methods: {
    // async init () {
    // },
    exportApi () {
      return getProductUploadFile
    },

    async onSubmit () {
      try {
        await this.$refs.formRef.validate()

        const arr = this.form.childCategory
        this.$set(this.form, 'childCategory', arr[1])
        this.$set(this.form, 'mainCategory', arr[0])

        this.form.fileData = undefined

        try {
          await importProduct(this.form)
          this.close()
          this.$message.success('导入商品成功^.^')
        } catch (err) {
          console.log(err, '导入商品失败')
        }
      } catch (err) {
        console.log(err, '验证表单失败')
      }
    },
    onUpLoad () {
      this.$refs.zmUpload.handelChoose()
    },
    async fileUpload (data) {
      let params = new FormData()
      console.log(data.file)
      params.append('fileData', data.file)
      const res = await uploadProduct(params)
      this.form.cacheKey = res.cacheKey
      return res.cacheKey
      // const _data = {
      //   orderId: this.selectedIds,
      //   enclosureUrl: res.url,
      //   enclosureName: res.name
      // }
      // await saleOrderApi.changeFile(_data)
      // this.loadList()
      // return res.cacheKey
    },
    onExport () {
      this.$refs.export.onExport()
    }
  }
}
</script>
<style lang='scss' scoped>
</style>
